<!DOCTYPE html PUBLIC>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <link rel="icon" href="./img/Logo.ico" type="image/x-icon">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="./css/login.css">
</head>
<body>
    <div class="LoginBox">
        <h1 id="title">Guibin啊</h1>
        <p>の个人博客</p>
        <div class="Frame"></div>
        <!--   登录     -->
            <div class="Loginbody">
                <h1>Login</h1>
                <div id="loginUI">
                    <form action="LoginServlet" method="post">
                        <div class="user">
                            用户名: <input type="text" name="username" id="userinput" autofocus="autofocus">
                        </div>
                        <div class="userpass">
                            密&nbsp&nbsp&nbsp码: <input type="password" name="password" id="passwdinput">
                        </div>
                        <div class="LOGIN">
                            <input type="submit" value="登录"/>
                        </div>
                    </form>
                </div>
            </div>
        <!--   注册     -->
        <div class="Registerbody">
            <h1>Register</h1>
            <div id="registerUI">
                <form action="RegisterServlet" method="post">
                    <div class="registeruser">
                        <!--  autofocus = "autofocus" 自动获取焦点   -->
                        用户名: <input type="text" name="username" id="registeruserinput" autofocus="autofocus">
                    </div>
                    <div class="registeruserpass">
                        密&nbsp&nbsp&nbsp码: <input type="password" name="password" id="registerpasswdinput">
                    </div>
                    <div class="registeruserpassagain">
                        确认密码: <input type="password" id="registerpasswdagaininput">
                    </div>
                    <div class="registerphone">
                        手机号码: <input type="text" name="phone" id="registerphoneinput">
                    </div>
                    <div class="REGISTER">
                        <button>注册</button>
                    </div>
                </form>
            </div>
        </div>
        <button id="change"></button>
    </div>
    <div class="tkong"></div>
</body>
<script>
    var flag=false; // 默认登录
    const Loginbox = document.querySelector(".LoginBox");
    const Loginbody = document.querySelector(".Loginbody");
    const Registerbody = document.querySelector(".Registerbody");
    const Change = document.querySelector("#change");
    const REGISTER = document.querySelector(".REGISTER");
    // 登录/注册 切换
    Change.addEventListener('click',() => {
        console.log("hello");
        if(!flag){
            // 注册
            Loginbox.style.color = 'rgb(175 42 171)';
            Change.style.backgroundColor = 'rgba(178,292,166,0.2)';
            document.querySelector("#title").style.textShadow = "11px 4px 6px rgb(10 81 34)";
            Loginbody.style.visibility = "hidden";
            Registerbody.style.visibility = "visible";
            flag = true;
        }else{
            // 登录
            Loginbox.style.color = 'rgb(178,292,166)';
            Change.style.backgroundColor = 'rgba(175,42,171,0.2)';
            document.querySelector("#title").style.textShadow = "11px 4px 6px #b04e4e";
            Loginbody.style.visibility = "visible";
            Registerbody.style.visibility = "hidden";
            flag = false;
        }
    });

    // 注册功能
    REGISTER.addEventListener('change',()=>{

    });

    // 自动获取焦点
    

</script>
</html>